<template>
  <div class="loginPage">
    <div class="title">
      <h3>登陆</h3>
      <p>请输入账号密码进行登录</p>
    </div>
    <van-form @failed="onFailed" @submit="submit">
      <van-row class="loginBox">
        <van-col span="2"></van-col>
        <van-col span="20">
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            clearable
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            clearable
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-col>
        <van-col span="2"></van-col>
      </van-row>

      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    submit(value) {
      Toast.loading('登录中...')
      this.axios({
        url: '/api/login',
        method: 'post',
        data: value
      })
        .then(res => {
          //登录成功
          Toast.clear()
          //localstage中存放返回的token
          const token = res.data
          localStorage.accessToken = token.access_token
          this.$router.push('/')
        })
        .catch(error => {
          console.log(error)
          Toast.clear()
          Toast.fail('用户名或密码错误')
        })
    }
  }
}
</script>
<style lang="less" scoped>
.loginPage {
  height: 100vh;
  overflow: hidden;
  background: url(../assets/images/login_bg.png) top center/100% no-repeat;
  .title {
    padding: 0 25px;
    margin-top: 75px;
    text-align: left;
    p {
      line-height: 2em;
      font-size: @font-size-md;
    }
  }
  .loginBox {
    margin-bottom: 100px;
    margin-top: 100px;
    .van-field__label {
      width: 4.2em;
    }
  }
}
</style>
